<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <script>
    // 克隆一个已有的元素节点
    // 元素.cloneNode(布尔值)
    // cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
    // -->若为true，则代表克隆时会包含后代节点一起克隆  深克隆
    // -->若为false，则代表克隆时不包含后代节点(如孙子)  浅克隆
    // -->默认为false

    const ul = document.querySelector('ul')
    // 1.克隆节点  元素.cloneNode(布尔值)
    // const li2 = ul.children[1].cloneNode(true)
    // console.log(li2)
    // 2.追加
    ul.appendChild(ul.children[0].cloneNode(true))
  </script>
</body>

</html>